<extend name="Public:base" />
<block name="title">食堂档口管理</block>
<block name="content">
    <div class=" ace-save-state" id="breadcrumbs">
        <div class="page-header">
            <h1>菜品管理
                <small><i class="ace-icon fa fa-angle-double-right"></i>所有菜品</small>
            </h1>
        </div>
        <!-- /.ace-settings-container -->
        <div class="page-content col-xs-11">
            
            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="row">
                        <div class="col-xs-12">
                            <ul class="nav nav-tabs padding-12 tab-color-blue background-blue" id="myTab">
                                <li class="active">
                                    <a v="0" href="javascript:;" onclick="showType('all',this)" data-toggle="tab">所有类别</a>
                                </li>
                                <?php foreach($itemTypeList as $k=>$type){?>
                                <li>
                                    <a v="<?php echo $type['item_type_id']?>" href="javascript:;" onclick="showType('<?php echo $type[\'item_type_id\']?>',this)" id="#type<?php echo $k?>" data-toggle="tab"><?php echo $type['item_type_name']?></a>
                                </li>
                                <?php }?>
                            </ul>
                            
                            <div>
                                <table class="table table-bordered table-hover">
                                    <thead>
                                    <tr>
                                        <th class="center">排序 <i style="color: dodgerblue" onclick="alert('序号越低排在越靠前')" class="fa fa-question-circle"></i></th>
                                        <th class="detail-col center">类别</th>
                                        <th class="center">菜品名称</th>
                                        <th class="hidden-480 center">计价单位</th>
                                        <th class="hidden-480 center">菜品图片</th>
                                        <th>
                                            <button type="button" class="btn btn-sm btn-success" onclick="addItem()">
                                                <span>添加菜品</span>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-default" onclick="addClass()">
                                                <span>新增类别</span>
                                            </button>
                                            <button type="button" class="btn btn-sm btn-danger" onclick="saveSort()">
                                                <span>保存排序</span>
                                            </button>
                                        </th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <form id="sortForm" class="form-inline" action="{:U('Admin/Item/saveSort')}" method="post" enctype="multipart/form-data">
                                        <?php foreach($itemList as $k=>$l){?>
                                        <tr class="all" type="<?php echo $l['item_type'];?>">
                                            <td class="center" width="40px">
                                                <input type="text" name="sort[<?php echo $l['item_id'];?>]" value="<?php echo $l['item_sort'];?>">
                                            </td>
                                            <td class="center"><?php echo $l['item_type_name'];?></td>
                                            <td class="center"><?php echo $l['item_name'];?></td>
                                            
                                            <td class="hidden-480 center"><?php echo $l['unit_name'];?></td>
                                            <td class="hidden-480 center">
                                                <?php if($l['item_image']){?>
                                                <a target="_blank" href="/Public/images/<?php echo $l['item_image']?>">
                                                    <img style="width: 50px;height: 50px" src="/Public/images/<?php echo $l['item_image_small']?>" alt="">
                                                </a>
                                                <?php }else{?>
                                                未上传
                                                <?php }?>
                                            </td>
                                            <td>
                                                <button type="button" class="btn btn-minier btn-purple" onclick="editItem(<?php echo $l['item_id']?>)">
                                                    <span>修改</span>
                                                </button>
                                                <button type="button" class="btn btn-minier btn-danger" onclick="delItem(<?php echo $l['item_id']?>)">
                                                    <span>删除菜品</span>
                                                </button>
                                                
                                            </td>
                                        </tr>
                                        <?php }?>
                                    </form>
                                    </tbody>
                                </table>
                            </div>
                        </div><!-- /.span -->
                    </div><!-- /.row -->
                    
                    
                    <!-- PAGE CONTENT ENDS -->
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div>
    </div>
    <div class="modal fade" id="bjy-add" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                    <h4 class="modal-title" id="myModalLabel"> 添加菜品</h4></div>
                <div class="modal-body">
                    <form id="bjy-form" class="form-inline" action="{:U('Admin/Item/add')}" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="pid" value="0">
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <tr>
                                <th width="20%">菜品名称：</th>
                                <td><input class="input-medium" type="text" name="item_name" id="item_name"></td>
                            </tr>
                            <tr>
                                <th width="20%">计价单位：</th>
                                <td><input class="input-medium" name="item_unit_name" type="text" id="item_unit_name">
                                </td>
                            </tr>
                            <tr>
                                <th width="20%">菜品图片：</th>
                                <td>
                                    <label class="ace-file-input ace-file-multiple">
                                        <input multiple="" type="file" id="id-input-file-3" name="item_image">
                                        <span class="ace-file-container" data-title="拖动图片，或点击上次菜品图片">
                                        </span>
                                        <a class="remove" href="#"><i class="ace-icon fa fa-times"></i></a>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <th width="20%">类别：</th>
                                <td>
                                    <select name="item_type" id="item_type">
                                        <?php foreach($itemTypeList as $type){?>
                                        <option value="<?php echo $type['item_type_id'];?>"><?php echo $type['item_type_name'];?></option>
                                        <?php }?>
                                    </select>
                            </tr>
                            <tr>
                                <th></th>
                                <td><input onclick="saveItem()" class="btn btn-success" type="button" value="添加">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="bjy-add3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                    <h4 class="modal-title" id="myModalLabel3">新增类别</h4></div>
                <div class="modal-body">
                    <form id="bjy-form3" class="form-inline" action="{:U('Admin/Item/addClass')}" method="post">
                        <input type="hidden" name="pid" value="0">
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <tr>
                                <th width="20%">类别名称：</th>
                                <td>
                                    <input class="input-medium" type="text" name="class_name" id="class_name">
                                </td>
                                <td>请输入类别名称，类别名称不能重复</td>
                            </tr>
                            <tr>
                                <td colspan="3" class="center">
                                    <input onclick="addSaveClass()" style="width: 30%" class="btn btn-success" type="button" value="保存">
                                </td>
                            
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <div class="modal fade" id="bjy-edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> &times;</button>
                    <h4 class="modal-title" id="myModalLabel2"> 编辑菜品</h4></div>
                <div class="modal-body">
                    <form id="bjy-edit-form" class="form-inline" action="{:U('Admin/Item/saveEditItem')}" method="post" enctype="multipart/form-data">
                        <input type="hidden" name="item_id" id="item_id">
                        <table class="table table-striped table-bordered table-hover table-condensed">
                            <tr>
                                <th width="20%">菜品名称：</th>
                                <td><input class="input-medium" type="text" name="item_name" id="item_name2"></td>
                            </tr>
                            <tr>
                                <th width="20%">计价单位：</th>
                                <td><input class="input-medium" type="text" name="item_unit_name" id="item_unit_name2">
                                </td>
                            </tr>
                            <tr>
                                <th width="20%">菜品图片：</th>
                                <td>
                                    <label class="ace-file-input ace-file-multiple">
                                        <input multiple="" type="file" id="id-input-file-4" name="item_image">
                                        <span class="ace-file-container" data-title="拖动图片，或点击上次菜品图片">
                                        </span>
                                        <a class="remove" href="#"><i class="ace-icon fa fa-times"></i></a>
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <th width="20%">菜品类别：</th>
                                <td>
                                    <select name="item_type" id="item_type2">
                                        <?php foreach($itemTypeList as $type){?>
                                        <option value="<?php echo $type['item_type_id'];?>"><?php echo $type['item_type_name'];?></option>
                                        <?php }?>
                                    </select>
                                
                                </td>
                            </tr>
                            <tr>
                                <th></th>
                                <td>
                                    <input onclick="saveEditItem()" class="btn btn-success" type="button" value="保存">
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
    </div>


</block>
<block name="js">
    <script>
        window.onload = function () {
            $('#id-input-file-3').ace_file_input({
                style: 'well',
                btn_choose: '点击选择图片上传菜品图片',
                btn_change: null,
                no_icon: 'ace-icon fa fa-cloud-upload',
                droppable: false,
                thumbnail: 'small'//large | fit
                //,icon_remove:null//set null, to hide remove/reset button
                /**,before_change:function(files, dropped) {
						//Check an example below
						//or examples/file-upload.html
						return true;
					}*/
                /**,before_remove : function() {
						return true;
					}*/
                ,
                preview_error: function (filename, error_code) {
                    //name of the file that failed
                    //error_code values
                    //1 = 'FILE_LOAD_FAILED',
                    //2 = 'IMAGE_LOAD_FAILED',
                    //3 = 'THUMBNAIL_FAILED'
                    //alert(error_code);
                }

            }).on('change', function () {
                console.log($(this).data('ace_input_files'));
                console.log($(this).data('ace_input_method'));
            });

            $('#id-input-file-4').ace_file_input({
                style: 'well',
                btn_choose: '点击选择图片上传菜品图片',
                btn_change: null,
                no_icon: 'ace-icon fa fa-cloud-upload',
                droppable: true,
                thumbnail: 'small'//large | fit
                //,icon_remove:null//set null, to hide remove/reset button
                /**,before_change:function(files, dropped) {
						//Check an example below
						//or examples/file-upload.html
						return true;
					}*/
                /**,before_remove : function() {
						return true;
					}*/
                ,
                preview_error: function (filename, error_code) {
                    //name of the file that failed
                    //error_code values
                    //1 = 'FILE_LOAD_FAILED',
                    //2 = 'IMAGE_LOAD_FAILED',
                    //3 = 'THUMBNAIL_FAILED'
                    //alert(error_code);
                }

            }).on('change', function () {
                console.log($(this).data('ace_input_files'));
                console.log($(this).data('ace_input_method'));
            });


        }

        function addItem() {
            var item_calss_id = $("li[class=active]").find("a").attr('v')
            if (item_calss_id != 0) {
                $("#item_type").val(item_calss_id)
            } else {
                $("#item_type").val(null)
            }
            $('#bjy-add').modal('show');

        }

        function showType(type, el) {
            $("#myTab").find("li").removeClass("active")
            $(el).parent().addClass("active")
            if (type == "all") {
                $("tr[class=all]").show()

            } else {
                $("tr[class=all]").hide()
                $("tr[type=" + type + "]").show()
            }


        }

        function saveItem() {
            var item_name = $("#item_name").val()
            var item_unit_name = $("#item_unit_name").val()
            var item_type = $("#item_type").val()
            if (!item_name) {
                alert("请填写菜品名称")
                return false
            }
            if (!item_unit_name) {
                alert("请填写计价单位")
                return false
            }
            if (!item_type) {
                alert("请选择菜品类别")
                return false
            }
            $("#bjy-form").submit()

        }

        function editItem(item_id) {
            var data = AjaxGet('/Admin/Item/edit', {
                item_id: item_id
            })
            $("#item_id").val(data.data.item_id)
            $("#item_name2").val(data.data.item_name)
            $("#item_unit_name2").val(data.data.unit_name)
            $("#item_type2").val(data.data.item_type)
            $('#bjy-edit').modal('show');
        }

        function saveEditItem() {
            var item_id = $("#item_id").val()
            var item_name = $("#item_name2").val()
            var item_unit_name = $("#item_unit_name2").val()
            var item_type = $("#item_type2").val()
            if (!item_id) {
                alert("操作异常，请重新操作")
                return false
            }
            if (!item_name) {
                alert("请填写菜品名称")
                return false
            }
            if (!item_unit_name) {
                alert("请填写菜品计价单位")
                return false
            }
            if (!item_type) {
                alert("请选择菜品种类")
                return false
            }
            $('#bjy-edit-form').submit()

        }

        function delItem(item_id) {
            var flag = confirm("删除菜品后，档口将不能对该菜品进行下单。是否继续？")
            if (flag == true) {
                var data = AjaxPost('/Admin/Item/del', {
                    item_id: item_id
                })
                if (data.status == true) {
                    alert("删除成功")
                    window.location.reload()
                } else {
                    alert("操作失败，请联系管理员")
                }

            }

        }

        function addClass() {
            $('#bjy-add3').modal('show');
        }

        function addSaveClass() {
            var class_name = $('#class_name').val()
            if (!class_name) {
                alert("请输入菜品名称")
                return false
            }
            $('#bjy-form3').submit()

        }

        function saveSort() {
            $('#sortForm').submit()
        }
    
    </script>
</block>
